import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProForm, { DrawerForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import React, { useState, useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { factoryList,saveFactory,updateFactory,deleteFactory } from '../service';
import { Popconfirm,Button,message } from 'antd';
export default () => {
const [showCreate, setShowCreate] = useState(false);
const actionRef = useRef<ActionType>();
const [detail, setDetail] = useState<any>({});
const columns: ProColumns[] = [
   {
       title:'厂家全称',
       dataIndex:'allName',
       width:200,
       ellipsis:true,
   },
   {
       title:'厂家简称',
       dataIndex:'shortName',
       width:100,
       ellipsis:true,
       hideInSearch:true,
   },
   {
    title:'厂家代号',
    dataIndex:'manufacturer',
    hideInSearch:true,
    width:100,
    ellipsis:true,
   },
   {
       title:'金额指标',
       dataIndex:'amountStatue',
       hideInSearch:true,
       valueType:'select',
       width:120,
       valueEnum:{
       '1' : {text:'有'},
       '2' : {text:'无'},
       }
   },
   {
       title:'产品指标',
       dataIndex:'productStatue',
       valueType:'select',
       hideInSearch:true,
       width:120,
       valueEnum:{
       '1' : {text:'有'},
       '2' : {text:'无'},
       }
   },
   {
    title:'字母简称',
    dataIndex:'eng',
    width:100,
    hideInSearch:true,
   },
   {
    title:'开票名称',
    dataIndex:'billName',
    width:200,
    ellipsis:true,
    hideInSearch:true,
   },
   {
    title:'纳税人识别号',
    dataIndex:'taxpayerNumber',
    width:200,
    ellipsis:true,
    hideInSearch:true,
   },
   {
    title:'地址',
    dataIndex:'billAddress',
    width:200,
    ellipsis:true,
    hideInSearch:true,
   },
   {
    title:'电话',
    dataIndex:'billPhone',
    width:150,
    ellipsis:true,
    hideInSearch:true,
   },
   {
    title:'开户行',
    dataIndex:'billBank',
    width:200,
    ellipsis:true,
    hideInSearch:true,
   },
   {
    title:'账号',
    dataIndex:'account',
    width:100,
    ellipsis:true,
    hideInSearch:true,
   },
   {
    title:'操作',
    valueType:'option',
    width:120,
    fixed: 'right',
    render: (text, record:any, _, action) => [
       <a key='detail' onClick={async () => {
       setDetail(record)
         setShowCreate(true)
       }}>详情</a>,
       <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => handleDelete(record.id)}><a>删除</a></Popconfirm>
      
    ]}
   ]
   const handleDelete = async(id:string) => {
        var val = await deleteFactory({
          id: id,
        });

       if (val.errorCode === '200') {
           message.success('删除成功')
           actionRef.current?.reloadAndRest?.()
       } else {
          message.error(val.errorMessage)
       }
   };
return (<PageContainer>
    <ProTable actionRef={actionRef} headerTitle='列表' pagination={{pageSizeOptions: ['20', '100', '500']}}
       scroll={{x: 1400}} request={(params, sorter, filter) => factoryList({ ...params,filter})} columns={columns} rowKey='id' toolbar={{settings: []}}
       search={{labelWidth: 120}} toolBarRender={() => [<Button type='primary' key='primary' onClick={() => {setShowCreate(true);setDetail(undefined)}}>新增</Button>]}
   />
  <DrawerForm title={detail ? '编辑' : '新增'} onVisibleChange={setShowCreate} visible={showCreate} drawerProps={{forceRender: true,destroyOnClose: true}} 
  onFinish={async (values: any) => {
    var val = undefined
    if (detail) {
      values.id = detail.id;
      val = await updateFactory(values);
    } else {
      val = await saveFactory(values);
    }
    if (val.errorCode === '200') {
      message.success('提交成功');
      actionRef.current?.reloadAndRest?.();
      return true;
    } else {
      message.error(val.errorMessage);
      return false;
    }
  }}>
       <ProForm.Group>
           <ProFormText name='allName' label='厂家全称'  placeholder='请输入厂家全称' width='md' initialValue={detail?.allName} rules={[{required: true}]} />
           <ProFormText name='shortName' label='厂家简称'  placeholder='请输入厂家简称' width='md' initialValue={detail?.shortName} rules={[{required: true}]} />
       </ProForm.Group>
       <ProForm.Group>
           <ProFormText name='manufacturer' label='厂家代号'  placeholder='请输入厂家代号' width='xs' initialValue={detail?.manufacturer} rules={[{required: true}]} />
           <ProFormSelect name='amountStatue' label='金额指标' initialValue={detail?.amountStatue}  width='xs' rules={[{required: true}]} options={[{value:'1',label:'有'},{value:'2',label:'无'}]}/>
           <ProFormSelect name='productStatue' label='产品指标' initialValue={detail?.productStatue}  width='xs' rules={[{required: true}]} options={[{value:'1',label:'有'},{value:'2',label:'无'}]}/>
           <ProFormText name='eng' label='字母简称'  placeholder='请输入厂家简称' width='md' initialValue={detail?.eng} rules={[{required: true}]} />
       </ProForm.Group>
       <ProForm.Group>
           <ProFormText name='billName' label='开票名称'  placeholder='请输入开票名称' width='md' initialValue={detail?.billName} />
           <ProFormText name='taxpayerNumber' label='纳税人识别号'  placeholder='请输入纳税人识别号' width='md' initialValue={detail?.taxpayerNumber} />
       </ProForm.Group>
       <ProForm.Group>
           <ProFormText name='billAddress' label='地址'  placeholder='请输入地址' width='md' initialValue={detail?.billAddress} />
           <ProFormText name='billPhone' label='电话'  placeholder='请输入电话' width='md' initialValue={detail?.billPhone} />
       </ProForm.Group>
       <ProForm.Group>
           <ProFormText name='billBank' label='开户行名称'  placeholder='请输入开户行名称' width='md' initialValue={detail?.billBank} />
           <ProFormText name='account' label='开户行账号'  placeholder='请输入开户行账号' width='md' initialValue={detail?.account} />
       </ProForm.Group>
	  </DrawerForm>
   </PageContainer>
)}